<template>
  <!-- 合同文件 -->
  <el-row class="contract_base_title" v-if="props.itemInfo.attachmentList.length > 0">{{ props.itemInfo.title }}</el-row>
  <div class="file_wrap" v-if="props.itemInfo?.attachmentList.length > 0">
    <div class="file_item" v-for="(item, index) in props.itemInfo?.attachmentList" :key="index">
      <div class="file_item_l">
        <img class="file_item_l_img" src="@assets/images/pdf.png" v-if="item.suffix == 'pdf'" />
        <img class="file_item_l_img" src="@assets/images/word.png" v-else />
      </div>
      <div class="file_item_c">
        <div class="file_item_c_top textoverflow">
          <!-- <a :href="item.path + (item.path.indexOf('?') != -1 ? '&' : '?') + 'access_token=' + getAccessToken()" target="_blank">
            {{ item.name }}
          </a> -->
          <a :href="item.path + (item.path.indexOf('?') != -1 ? '&' : '?') " target="_blank">
            {{ item.name }}
          </a>
        </div>
      </div>
      <!-- <a :href="item.path + (item.path.indexOf('?') != -1 ? '&' : '?') + 'access_token=' + getAccessToken()" target="_blank" class="file_item_r"
        ><img class="file_item_r_img" src="@assets/images/dw.png"
      /></a> -->
      <a :href="item.path + (item.path.indexOf('?') != -1 ? '&' : '?')" target="_blank" class="file_item_r"
        ><img class="file_item_r_img" src="@assets/images/dw.png"
      /></a>
    </div>
  </div>
</template>

<script setup>
import { getAccessToken } from 'utils/headerToken'
import { useI18n } from 'vue-i18n'
const { t } = useI18n() // 中英文
const props = defineProps({
  itemInfo: {
    type: Object,
    default: () => {}
  }
})
console.log(props.itemInfo)
</script>

<style lang="scss" scoped>
.file_wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .file_item {
    width: calc(100% / 2 - 12px);
    height: 96px;
    background: #fafafa;
    border-radius: 2px;
    border: 1px solid #ebebeb;
    margin-right: 12px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    .file_item_l {
      margin-left: 24px;
      width: 32px;
      .file_item_l_img {
        width: 32px;
        height: 32px;
      }
    }
    .file_item_c {
      margin-left: 12px;
      width: calc(100% - 32px - 24px - 32px - 28px - 12px);
      .file_item_c_top {
        font-size: 14px;
        color: #333;
        width: 100%;
      }
      .file_item_c_botm {
        font-size: 12px;
        color: #999;
      }
    }
    .file_item_r {
      margin-left: 12px;
      padding-right: 16px;
      width: 32px;
      cursor: pointer;
      .file_item_r_img {
        width: 32px;
        height: 32px;
      }
    }
  }
  .file_item:nth-child(even) {
    margin-right: 0px;
  }
}

.textoverflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
